<template>
<div>
  <div style="display: flex; justify-content: center">
    <el-input
              v-model="keywords"
              placeholder="通过用户名搜索用户"
              prefix-icon="el-icon-search"
              style="width: 400px;margin-right: 8px"
              @keydown.enter.native="searchAdmin"></el-input>
    <el-button type="primary" icon="el-icon-search" @click="searchAdmin">搜索</el-button>
  </div>

  <div style="display: flex;justify-content: space-around;margin-top: 30px; flex-wrap: wrap">
    <el-card class="box-card" v-for="(admin,index) in admins" :key="index">
      <div slot="header" class="clearfix">
        <span>{{admin.name}}</span>
        <el-button style="float: right; padding: 3px 0; color: red"
                   type="danger"
                   icon="el-icon-delete"
                   @click="deleteAdmin(admin)"></el-button>
      </div>
      <div style="color: #2b91af">
          <img src="../../assets/img/hy2.jpg" alt=""
               style="width: 60px;border-radius: 50%;margin-left: 100px">
        <div>用户名：{{admin.name}}</div>
        <div>手机号码：{{admin.phone}}</div>
        <div>电话号码：{{admin.telephone}}</div>
        <div>地址：{{admin.address}}</div>
        <div>用户状态：
          <el-switch
              @change="switchChange(admin)"
              v-model="admin.enabled"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="启用"
              inactive-text="禁用">
          </el-switch>
        </div>
        <div>用户角色：
        <el-tag type="success"
                v-for="(role,index2) in admin.roles"
                :key="index2"
                style="margin-left: 5px">
          {{role.nameZh}}</el-tag>
          <el-popover
              placement="bottom"
              title="角色列表"
              width="200"
              trigger="click"
              @show="roleShow(admin)"
              @hide="hidePopover(admin)">
            <el-select v-model="selectRoles" multiple placeholder="请选择">
              <el-option
                  v-for="(r,index) in allRoles"
                  :key="index"
                  :label="r.nameZh"
                  :value="r.id">
              </el-option>
            </el-select>
            <el-button slot="reference" size="mini" icon="el-icon-more"></el-button>
          </el-popover>
        </div>
        <div>备注：{{admin.remark}}</div>
      </div>
    </el-card>

  </div>
</div>
</template>

<script>
export default {
name: "SysAdmin",
  data(){
  return{
    admins:[],
    keywords:'',
    allRoles:[],
    selectRoles:[]
  }
  },
  methods:{
  hidePopover(admin){
    debugger
    let roles=[]
    let flag = false
    Object.assign(roles,admin.roles)
    if(roles.length !== this.selectRoles.length){
      flag = true
    }else {
      for (let i = 0; i < roles.length ; i++) {
        let role = roles[i]
        for (let j = 0; j <this.selectRoles.length ; j++) {
          let ss = this.selectRoles[j]
          if(role.id === ss){
            roles.splice(i,1)
            i--
            break
          }
        }
      }
      if(roles.length!== 0){
        flag = true
      }
    }

    if(flag){
      let url = '/admin/updaterole?adminId='+ admin.id
      this.selectRoles.forEach(rs=>{
        url += '&rids='+ rs
      })
      this.putRequest(url).then(res=>{
        if (res){
          this.initAdmins()
        }
      })
    }
    },
  roleShow(admin){
    this.initRoles()
    let roles = admin.roles //roles是一个对象
    this.selectRoles = []
    roles.forEach(role=>{
      this.selectRoles.push(role.id)
    })
  },
  initRoles(){
    this.getRequest('/admin/roles',this.allRoles).then(res=>{
      if (res){
        this.allRoles = res
      }
    })
  },
  switchChange(admin){
    this.putRequest('/admin/update',admin).then(res=>{
      if(res){
        this.initAdmins()
      }
    })
  },
  deleteAdmin(admin){
    this.$confirm('此操作将永久删除该'+admin.name+', 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
     this.deleteRequest('/admin/delete?id='+admin.id).then(res=>{
       if(res){
         this.initAdmins()
       }
     })
    }).catch(() => {
      this.$message({
        type: 'info',
        message: '已取消删除'
      });
    });
  },
  searchAdmin(){
      this.initAdmins()
    },
  initAdmins(){
    this.getRequest('/admin/list?keywords='+this.keywords).then(res=>{
      if(res){
        this.admins = res
      }
    })
  }
  },
  mounted() {
  this.initAdmins()
  }
}
</script>

<style scoped>
.box-card{
  width: 350px;
  margin-left: 50px;
  margin-bottom: 30px;
}
</style>